import { Space, Popconfirm, Image as AntdImage, message } from "antd";
import { Button, Card as SemiCard, Row, Col, Descriptions as SemiDescriptions } from "@douyinfe/semi-ui";
import { useModel } from "umi";
import { useReactive } from "ahooks";
import Jdenticon from "react-jdenticon";

import { UpdateOpenExamine, UpdateOpenApprove, UpdateOpenFinancial, UpdateOpenAccounting } from "../../_graphql/organizations";

// import IndustryTypeList from "../../components/organizations/industry.type.list";
// import DependentedDatabases from "../../components/organizations/dependented_databases";

const OrganizationInformation = () => {
    const { windowInnerHeight, graphqlFetchPlatform, UTCTimeToLocal } = useModel("global");
    const { kuboUrl } = useModel("kubo");
    const { currentOrganizationInfo, loadCurrentOrganizationBaseInfo } = useModel("organization.info");

    const state = useReactive({
        loading: false,
        submitLoading: false,
    });

    const HandleOpenExamine = ({ record }) => {
        const confirm = async () => {
            state.submitLoading = true;
            if (record.usageStatus && record.initializationStatus) {
                let res = await graphqlFetchPlatform({
                    query: UpdateOpenExamine,
                    variables: {
                        uuid: record.uuid,
                        isOpenExamine: !record.isOpenExamine,
                        updatedTime: new Date().getUTCTime(),
                    },
                });
                if (res) {
                    await loadCurrentOrganizationBaseInfo();
                    await remoteData({
                        object: "base-platform-management-service",
                        serviceName: "/api/v1/organization/publishToAuthCenter",
                        params: {
                            uuid: record.uuid,
                            callback: "handleNotification",
                        },
                    });
                }
            } else {
                message.warning("组织未启用或未初始化, 不能操作该功能");
            }
            state.submitLoading = false;
        };

        return record.isOpenExamine ? (
            <Popconfirm title="确认要暂停该组织使用审核功能吗?" okButtonProps={{ loading: state.submitLoading }} onConfirm={confirm}>
                <Button size="small" type="primary" style={{ marginBottom: 4 }}>
                    已开通
                </Button>
            </Popconfirm>
        ) : (
            <Popconfirm title="确认要开通该组织的审核功能吗?" okButtonProps={{ loading: state.submitLoading }} onConfirm={confirm}>
                <Button size="small" type="danger" style={{ marginBottom: 4 }}>
                    未开通
                </Button>
            </Popconfirm>
        );
    };

    const HandleOpenApprove = ({ record }) => {
        const confirm = async () => {
            state.submitLoading = true;
            if (record.usageStatus && record.initializationStatus) {
                let res = await graphqlFetchPlatform({
                    query: UpdateOpenApprove,
                    variables: {
                        uuid: record.uuid,
                        isOpenApprove: !record.isOpenApprove,
                        updatedTime: new Date().getUTCTime(),
                    },
                });
                if (res) {
                    await loadCurrentOrganizationBaseInfo();
                    await remoteData({
                        object: "base-platform-management-service",
                        serviceName: "/api/v1/organization/publishToAuthCenter",
                        params: {
                            uuid: record.uuid,
                            callback: "handleNotification",
                        },
                    });
                }
            } else {
                message.warning("组织未启用或未初始化, 不能操作该功能");
            }
            state.submitLoading = false;
        };

        return record.isOpenApprove ? (
            <Popconfirm title="确认要暂停该组织使用审批功能吗?" okButtonProps={{ loading: state.submitLoading }} onConfirm={confirm}>
                <Button size="small" type="primary" style={{ marginBottom: 4 }}>
                    已开通
                </Button>
            </Popconfirm>
        ) : (
            <Popconfirm title="确认要开通该组织的审批功能吗?" okButtonProps={{ loading: state.submitLoading }} onConfirm={confirm}>
                <Button size="small" type="danger" style={{ marginBottom: 4 }}>
                    未开通
                </Button>
            </Popconfirm>
        );
    };

    const HandleOpenFinancial = ({ record }) => {
        const confirm = async () => {
            state.submitLoading = true;
            if (record.usageStatus && record.initializationStatus) {
                let res = await graphqlFetchPlatform({
                    query: UpdateOpenFinancial,
                    variables: {
                        uuid: record.uuid,
                        isOpenFinancial: !record.isOpenFinancial,
                        updatedTime: new Date().getUTCTime(),
                    },
                });
                if (res) {
                    await loadCurrentOrganizationBaseInfo();
                }
            } else {
                message.warning("组织未启用或未初始化, 不能操作该功能");
            }
            state.submitLoading = false;
        };

        return record.isOpenFinancial ? (
            <Popconfirm title="确认要暂停该组织使用财务管理功能吗?" okButtonProps={{ loading: state.submitLoading }} onConfirm={confirm}>
                <Button size="small" type="primary" style={{ marginBottom: 4 }}>
                    已开通
                </Button>
            </Popconfirm>
        ) : (
            <Popconfirm title="确认要开通该组织的财务管理功能吗?" okButtonProps={{ loading: state.submitLoading }} onConfirm={confirm}>
                <Button size="small" type="danger" style={{ marginBottom: 4 }}>
                    未开通
                </Button>
            </Popconfirm>
        );
    };

    const HandleOpenAccounting = ({ record }) => {
        const confirm = async () => {
            state.submitLoading = true;
            if (record.usageStatus && record.initializationStatus) {
                let res = await graphqlFetchPlatform({
                    query: UpdateOpenAccounting,
                    variables: {
                        uuid: record.uuid,
                        isOpenAccounting: !record.isOpenAccounting,
                        updatedTime: new Date().getUTCTime(),
                    },
                });
                if (res) {
                    await loadCurrentOrganizationBaseInfo();
                }
            } else {
                message.warning("组织未启用或未初始化, 不能操作该功能");
            }
            state.submitLoading = false;
        };

        return record.isOpenAccounting ? (
            <Popconfirm placement="topRight" title="确认要暂停该组织使用会计核算功能吗?" okButtonProps={{ loading: state.submitLoading }} onConfirm={confirm}>
                <Button size="small" type="primary" style={{ marginBottom: 4 }}>
                    已开通
                </Button>
            </Popconfirm>
        ) : (
            <Popconfirm placement="topRight" title="确认要开通该组织的会计核算功能吗?" okButtonProps={{ loading: state.submitLoading }} onConfirm={confirm}>
                <Button size="small" type="danger" style={{ marginBottom: 4 }}>
                    未开通
                </Button>
            </Popconfirm>
        );
    };

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 60 - 54 - 2;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>基本信息</span>}
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                size="default"
                bodyStyle={{ padding: "20px 40px", height: cardBodyHeight }}
            >
                {currentOrganizationInfo.uuid ? (
                    <Row gutter={10}>
                        <Col span={3}>
                            <Space direction="vertical">
                                <div style={styles.avatarView}>
                                    {currentOrganizationInfo?.avatarHash ? (
                                        <AntdImage
                                            width={110}
                                            height={110}
                                            preview={false}
                                            src={kuboUrl && currentOrganizationInfo?.avatarHash ? kuboUrl + currentOrganizationInfo.avatarHash : ""}
                                        />
                                    ) : (
                                        <Jdenticon size="110" value={currentOrganizationInfo?.fullName || ""} />
                                    )}
                                </div>
                            </Space>
                        </Col>
                        <Col span={10}>
                            <SemiDescriptions>
                                <SemiDescriptions.Item itemKey="组织简称">{currentOrganizationInfo.shortName}</SemiDescriptions.Item>
                                <SemiDescriptions.Item itemKey="组织UUID">{currentOrganizationInfo.uuid}</SemiDescriptions.Item>
                                <SemiDescriptions.Item itemKey="统一社会信用代码">{currentOrganizationInfo.uniformSocialCreditCode}</SemiDescriptions.Item>
                                <SemiDescriptions.Item itemKey="组织类型">{currentOrganizationInfo.type}</SemiDescriptions.Item>
                                <SemiDescriptions.Item itemKey="组织办公地址">
                                    {currentOrganizationInfo.officeLocation +
                                        (currentOrganizationInfo.officeLocationAddress ? currentOrganizationInfo.officeLocationAddress : "")}
                                </SemiDescriptions.Item>
                                <SemiDescriptions.Item itemKey="创建时间">{UTCTimeToLocal(currentOrganizationInfo.createdTime)}</SemiDescriptions.Item>
                                <SemiDescriptions.Item itemKey="联系电话">{currentOrganizationInfo.contactNumber}</SemiDescriptions.Item>
                                <SemiDescriptions.Item itemKey="创建人">{currentOrganizationInfo.createrName}</SemiDescriptions.Item>
                                <SemiDescriptions.Item itemKey="超管">{currentOrganizationInfo.superAdministratorName}</SemiDescriptions.Item>
                                <SemiDescriptions.Item itemKey="部署模式">{currentOrganizationInfo.deployMode}</SemiDescriptions.Item>
                                <SemiDescriptions.Item itemKey="默认网关类型">{currentOrganizationInfo.defaultGatewayType}</SemiDescriptions.Item>
                            </SemiDescriptions>
                        </Col>
                        <Col span={4}>
                            <SemiDescriptions>
                                <SemiDescriptions.Item itemKey="开通审核功能">
                                    <HandleOpenExamine record={currentOrganizationInfo} />
                                </SemiDescriptions.Item>
                                <SemiDescriptions.Item itemKey="开通审批功能">
                                    <HandleOpenApprove record={currentOrganizationInfo} />
                                </SemiDescriptions.Item>
                                <SemiDescriptions.Item itemKey="开通财务功能">
                                    <HandleOpenFinancial record={currentOrganizationInfo} />
                                </SemiDescriptions.Item>
                                <SemiDescriptions.Item itemKey="开通会计核算功能">
                                    <HandleOpenAccounting record={currentOrganizationInfo} />
                                </SemiDescriptions.Item>
                            </SemiDescriptions>
                        </Col>
                        {/* <Col span={11}>
                            <DependentedDatabases dependentedDatabases={currentOrganizationInfo.dependentedDatabases} loadOrganizationBaseInfo={loadOrganizationBaseInfo} />
                        </Col> */}
                    </Row>
                ) : (
                    ""
                )}
            </SemiCard>
        </div>
    );
};

const styles = {
    avatarView: {
        display: "inline-block",
        width: 110,
        height: 110,
        margin: 0,
        padding: 0,
        border: "1px solid #d9d9d9",
        borderRadius: 2,
    },
};

export default OrganizationInformation;
